<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="/assets/extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="/assets/extjs/bootstrap.js"></script>
<script type="text/javascript">
    Ext.require(['*']);
    Ext.onReady(function() {
        Ext.QuickTips.init();
        // NOTE: This is an example showing simple state management. During development,
        // it is generally best to disable state management as dynamically-generated ids
        // can change across page loads, leading to unpredictable results.  The developer
        // should ensure that stable state ids are set for stateful components in real apps.
        Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
 
     var store = Ext.create('Ext.data.TreeStore', {
       root: {
           expanded: true,
           text: "",
           user: "",
           status: "",
        split: true,
           children: [
               { text: "detention", leaf: true },
               { text: "homework", expanded: true,
                   children: [
                       { text: "book report", leaf: true,id: "37001" },
                       { text: "alegrbra", leaf: true,id: "37000" }
                   ]
               },
               { text: "buy lottery tickets", leaf: true }
           ]
       }
     });
  var leftMenu = Ext.create('Ext.tree.Panel', {
      
          store: store,
          hideHeaders: true,
          rootVisible: true,
          region: 'west',
       id: 'west-panel', // see Ext.getCmp() below
       title: 'West',
       split: true,
                  collapsible: true,
                  collapsed: false,
       width: 200, 
      viewConfig: {
          plugins: {
              ptype: 'treeviewdragdrop'
          }
      },
      border: 0,
      height: 500,
      rootVisible: false  //默认不显示根节点
  });
    leftMenu.on("itemclick",function(view,record,item,index,e){
       alert("点击的节点ID是："+record.raw.id+",文字是："+record.raw.text);
 
  });
 
  var contentTabs = Ext.create('Ext.tab.Panel', {
      width: 400,
      height: 400,
            region: 'center',
      items: [{
          title: 'Home',
          html: 'Home',
          itemId: 'home'
      }, {
          title: 'Users',
          html: 'Users',
          itemId: 'users',
          hidden: true
      }, {
          title: 'Tickets',
          html: 'Tickets',
                closable: true,
          itemId: 'tickets'
      }]    
  });

        var viewport = Ext.create('Ext.Viewport', {
            id: 'mainFrame',
            layout: 'border',
            items: [
            Ext.create('Ext.panel.Panel', {
                region: 'north',
                height: 50, 
                split: true,
       html: '<p>这里是导航条!</p>'
            }), contentTabs, leftMenu ]
        });
    });
    </script>
</head>
<body>
</body>
</html>